<template>
    <el-menu
      :default-active="$route.path"
      class="menu_nav"
      background-color="#002033"
      text-color="#fff"
      active-text-color="#409EFF"
      :collapse-transition="false"
      router
    >
      <i class="el-icon-s-operation"  @click="onIsCollapse"></i>
      <el-menu-item index="/admin">
        <i class="iconfont icon-shouye"></i>
        <span slot="title">首页</span>
      </el-menu-item>
      <el-menu-item index="/usermanagement">
      <i class="iconfont icon-yonghuguanli"></i>
        <span slot="title">用户管理</span>
      </el-menu-item>
      <el-menu-item index="/homemanagement">
        <i class="iconfont icon-daiguancangguanli"></i>
        <span slot="title">房屋管理</span>
      </el-menu-item>
    </el-menu>
</template>

<script>

export default {
  name: 'AsideMenu',
  data () {
    return {
      isCollapse: false // 侧边菜单栏的展开状态
    }
  },

  mounted () {

  },

  methods: {
    onIsCollapse () {
      this.isCollapse = !this.isCollapse
      this.$emit('collapseFun', this.isCollapse)
    }
  }
}
</script>

<style scoped>
.menu_nav .iconfont {
  margin-right: 10px;
}
.iconfont {
  color: #fff;
  font-size: 20px;
}
.title {
  color: #fff;
  font-size: 18px;
}
.el-icon-s-operation {
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  margin-top: 10px;
}
</style>
